<template>
  <div class="component-pc__rtc-live" @click="handleShowControls">
    <div :class="[!is_extend_subScreen ? 'main-video-box' : 'small-video-box']">
      <video
        autoplay
        id="rtcVideo"
        playsinline="true"
        webkit-playsinline="true"
        x5-playsinline="true"
        x5-video-orientation="portraint"
        ref="rtcVideo"
      ></video>
    </div>
    <div
      :class="[is_extend_subScreen ? 'main-video-box' : 'small-video-box']"
      v-if="is_share_video && is_share_screen"
    >
      <video
        autoplay
        id="rtcShareVideo"
        playsinline="true"
        webkit-playsinline="true"
        x5-playsinline="true"
        x5-video-orientation="portraint"
        ref="rtcShareVideo"
      ></video>
    </div>
    <div
      class="pause-box"
      v-if="!is_subscribed_teacher"
      @click="!is_proccesing && handleStatus('play')"
    >
      <Icon type="md-play" v-if="!is_proccesing" />
      <van-loading color="#fff" v-else="is_proccesing" size="34" />
    </div>
    <div
      class="controls"
      :style="{
        transform: is_show_controls ? 'translateY(0)' : 'translateY(100%)'
      }"
    >
      <div class="status">
        <div
          class="pause"
          v-if="!is_subscribed_teacher"
          @click="handleStatus('play')"
        >
          <Icon type="md-play" />
        </div>
        <div
          class="start"
          v-if="is_subscribed_teacher"
          @click="handleStatus('pause')"
        >
          <Icon type="md-pause" />
        </div>
      </div>
      <div class="placeholder"></div>
      <div
        class="exchange"
        v-if="is_join_channel && !is_proccesing && is_share_video && is_share_screen"
      >
        <van-icon name="exchange" @click="exchangeScreen" />
      </div>
      <div class="volume" v-if="is_join_channel && !is_proccesing">
        <div class="mute" v-if="is_mute_volume" @click="handleVolume('up')">
          <Icon type="md-volume-off" />
        </div>
        <div class="up" v-if="!is_mute_volume" @click="handleVolume('mute')">
          <Icon type="md-volume-up" />
        </div>
      </div>
      <div class="fullscreen" v-if="is_join_channel && !is_proccesing">
        <div
          class="requestfull"
          @click="fullScreen('requestfull')"
          v-if="!is_full_screen"
        >
          <Icon type="md-expand" />
        </div>
        <div
          class="exitfull"
          @click="fullScreen('exitfull')"
          v-if="is_full_screen"
        >
          <Icon type="md-expand" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RtcLive from "../public/RtcLive.js";
export default {
  mixins: [RtcLive]
};
</script>

<style lang="scss" scoped>
.component-pc__rtc-live {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000000;
  .main-video-box {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 0.3s ease-in;
    > video {
      width: auto;
      height: 100%;
    }
  }
  .small-video-box {
    position: absolute;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    bottom: 0;
    right: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
    > video {
      height: 100%;
      width: auto;
    }
  }
  .pause-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    > i {
      font-size: 34px;
      color: #fff;
    }
  }
  .controls {
    display: flex;
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-image: linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.37),
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    );
    transition: transform 0.5s ease;
    overflow: hidden;
    transform: translateY(100%);
    .placeholder {
      flex: 1;
    }
    .exchange {
      min-width: 50px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        color: #fff;
        font-size: 24px;
      }
    }
    .status {
      min-width: 50px;
      i {
        color: #fff;
        font-size: 24px;
      }
      .start,
      .pause {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
    .volume {
      min-width: 50px;
      i {
        color: #fff;
        font-size: 24px;
      }
      .mute,
      .up {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
    .fullscreen {
      min-width: 50px;
      i {
        color: #fff;
        font-size: 24px;
      }
      .requestfull,
      .exitfull {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
